<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="app">
        <!-- 一、{{}}:Mustanche语法  双大括号 -->
        <h1>{{num}}</h1>
        <h1>{{num}}{{num}}</h1>
        <h1>{{num+num}}</h1>
        <!-- 双大括号中变量只能传入一个 -->
        <h1>{{num,8}}</h1>
        <h1>{{8,num}}</h1>

        <h1>{{num*10}}</h1>
        <h1>{{num+"hello"}}</h1>

        <!-- 二、其他指令 -->
        <!-- 1.v-once：表示元素或者组件只会渲染一次，不会随着数据的改变而改变 -->
        <h1 v-once>{{num}}</h1>
        <!-- 2.v-html:把字符串当做html标签解析，然后渲染到页面中 -->
        <h1 v-html="url"></h1>
        <!-- 3.v-pre: 把元素里面的内容原样输出，不做任何解析-->
        <h1 v-pre>{{num}}</h1>
        
    </div>

    <script src="./vue.js"></script>
    <script>
        let app=new Vue({
            el:"#app",
            data:{
                num:5,
                url:`<a href="https://www.baidu.com">百度一下</a>`
            }
        })
    </script>
    
</body>
</html>